<template>
  <div class="App">
    <div class="ceshi"></div>
    <SonCon></SonCon>
    <FormCon ref="baseForm"></FormCon>
    <button v-on:click="getSonData">获取数据</button>
    <button v-on:click="reverseSonData">重置数据</button>
  </div>
</template>

<script>
import SonCon from "./components/SonCon.vue";
import FormCon from "./components/FormCon.vue";
export default {
  components: {
    SonCon,
    FormCon,
  },
  methods: {
    getSonData() {
      // 调用组件中getData()方法
      const re = this.$refs.baseForm.getData();
      console.log(re);
    },
    reverseSonData() {
      this.$refs.baseForm.reverseData();
    },
  },
};
</script>

<style>
.ceshi {
  width: 300px;
  height: 300px;
}
</style>